<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ margin:0; padding:0; list-style:none;}
#ul1 li{ width:100px; height:30px; line-height:30px; text-align:center; float:left; border:1px solid #000; background:#ccc; position:relative;}
#ul1 li:hover{ background:#f60;}
.son{  display:none;}
.graSon{ display:none;position:absolute; left:100px; top:-1px;}
</style>
<script>
window.onload = function(){
    var oUl1 = document.getElementById('ul1');
    var aLi = oUl1.getElementsByTagName('li');//获取所以的li
    var timer = null;//设置定时器

    //遍历所有的li
    for(var i = 0;i < aLi.length; i++){
        //给每一个li加鼠标移入事件
        aLi[i].onmouseover = function(){
            clearTimeout(this.timer);//先清除定时器
            var that = this;// 用that 代替this 在定时器中使用
            this.timer = setTimeout(function(){
                //获取当然li下面的第一个ul列表即下级菜单
                var oUl =that.getElementsByTagName('ul')[0];
                //判断列表是否存在，存在就让它显示
                if(oUl){
                    oUl.style.display = 'block';    
                }        
            },300);
        }
        // 鼠标移出事件  
        aLi[i].onmouseout = function(){
            clearTimeout(this.timer);
            var that = this;
            this.timer = setTimeout(function(){
                var oUl =that.getElementsByTagName('ul')[0];
                if(oUl){
                    oUl.style.display = 'none';    
                }        
            },300);
        }    
    }
}
</script>
</head>
<body>
<ul id="ul1">
    <li>首页</li>
    <li>
        <span>公司简介 ▼</span>
        <ul class="son">
            <li>大事记</li>
            <li>
                <span>领导致辞 ▶</span>
                <ul class="graSon">
                    <li>
                        <span>2013年 ▶</span>
                        <ul class="graSon">
                            <li>10月份</li>
                            <li>9月份</li>
                            <li>8月份</li>
                        </ul>
                    </li>
                    <li>2012年</li>
                </ul>
            </li>
            <li>企业文化</li>
        </ul>
    </li>
    <li>联系我们</li>
    <li>
        <span>产品展示 ▼</span>
        <ul class="son">
            <li>康师傅</li>
            <li>老谭</li>
            <li>今麦郎</li>
        </ul>
    </li>
</ul>
</body>
</html>